<template>
    <div class="bg">
        <div class="zhua"></div>
        <div class="m-song-light a-circling">
            <div class="imgc">
                <img :src="imgsrc" alt="">
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"Cricle",
    data(){
        return {
            imgsrc:"http://p2.music.126.net/usVRErrKKby-qx7-AKfTlg==/109951166654342138.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0"
        }
    }
}
</script>
<style lang="less" scoped>
.bg{
    width: 100vw;
    height: 50vh;
    background: rgb(37, 37, 20);
}
.m-song-light{
    width: 247px;
    height: 247px;
    // background: #000000;
    // border: 1px solid red;
    background: url("../assets/cricle.png") no-repeat center center;
    background-size:100% 100% ;
    -webkit-animation: turn linear 3s infinite;
    animation: turn linear 8s infinite;
    position: relative;
    left: 50%;
    top: 9%;
    margin-left: -124px;
}
.zhua{
    width: 73px;
    height: 118px;
    background: url("https://s3.music.126.net/mobile-new/img/needle-ab.png?4b81da043356110081e5ccaed2e6f2ad=")no-repeat;
    background-size:100% 100% ;
    position: absolute;
    left: 50%;
    // margin:0 0 0 -36px ;
    z-index: 999;
}
@-webkit-keyframes turn {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes turn {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
.imgc{
    width: 184px;
    height: 184px;
    // border: 1px solid #333;
    position: absolute;
    // width: 150px;
    // height: 150px;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin: -92px 0 0 -92px;
}
.imgc img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -75px 0 0 -75px;
}
</style>